﻿<%@page contentType="text/html;charset=utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	//图片贴 帖子标识id
	String shared_id = request.getParameter("shared_id");
	if(shared_id == null)
		shared_id = "0";
	
	shared_id="5427c291e4b030c336a09b91";
%>
<!DOCTYPE html>
<html>
<head>
    <title>奶瓶快跑</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1"/>
	<meta name="format-detection" content="telephone=no,address=no"/>
    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="statics/css/iPicture.css"/>
    <script type="text/javascript" src="statics/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript" src="statics/js/jquery.ipicture.js"></script>
    <script src="https://cn.avoscloud.com/scripts/lib/av-0.4.3.min.js"></script>
    
	<style type="text/css">
		.maindiv {
			margin: 0px;
			padding: 0px;
			padding-left:0px;
			padding-right:0px;
			border:0px solid; 
		}
		.mybox{ 
			position:absolute;
		}
		
		
		a{text-decoration:none;}
		
		.div_yj{
            text-align: center;
            font-size: 8px;
            width: 100px;
            color: white;
            padding: 5px;
            margin: 5px;
			position: absolute;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
			filter:alpha(Opacity=80);
			-moz-opacity:0.7;
			opacity: 0.7;
        }
        .box1{
            background-color: black;
        }
        .myfoot{     
		      width:auto; margin-top:12px; 
		      font-family:Arial,Georgia, Helvetica, sans-serif;
		      font-size:12px; 
		      color:#333;
		      line-height:5px;
		      letter-spacing:1px
		}
		
		.roundimg{
			border-radius: 13px;
			-webkit-border-radius: 43px;
			-moz-border-radius: 13px;
		}
		.round_photo{
		    -moz-border-radius: 35px;
		    -webkit-border-radius: 35px;
		    border-radius:35px;
		    behavior:url(PIE.htc);
		}
	</style>
	<script>
	function risizeImg(){
		var boby_width=$(document.body).width();
		var img_width=$('#shared_img').width();
		var img_height=$('#shared_img').height();
		$('#shared_img').css('width',function(){ return boby_width-2;});
		$('#shared_img').css('height',function(){ return img_height*(boby_width/img_width);});
	}
	$(window).resize(function() {
		risizeImg();
		});
	$(document).ready(function(){
		//加载头
		$('#top').load("top.jsp");

		var imgSharedId="<%=shared_id%>";
		if(imgSharedId!="0"){
			//---------从avos BottleRun应用中 获取数据------------
			//0初始化 param1：应用 id、param2：应用 key
			AV.initialize("e12j1xzbrcup5a12j47yno6qkdxit4q8g4t0lrxyenc06dm3", "al68niski3qq3h7idvnjyp6v1g7ly6a4whbm5bv1hf5ojx6a");

			AV.Cloud.run("hello", {name: 'dennis'}, {
				  success: function(data){
				      //调用成功，得到成功的应答data
				      alert(">>>>>>>>>>>>>>data "+data);
				  },
				  error: function(err){
				      //处理调用失败
					  alert(">>>>>>>>>>>>>>err "+err);
				  }
				});
			
			var GameScore = AV.Object.extend("imgShared");
			var query = new AV.Query(GameScore);
			query.equalTo("objectId", imgSharedId);
			query.first().then(function(object){
			    alert("Successfully retrieved " + object + " scores.");
			    if(object){
			    	//1帖子图片 标签 标题 阅读数 赞数 评论数
					setTimeout();
					var imgUrl=object.get("imgUrl");
			        var sharedTitle=object.get("sharedTitle");
			        var commentCount=object.get("commentCount");
			        var praiseCount=object.get("praiseCount");
			        var readCount=object.get("readCount");
			        $("#shared_img").attr("src",imgUrl);
			        $("#sharedTitle").text(sharedTitle);
			        $(".readCount").text(readCount);
			        $(".praiseCount").text(praiseCount);
			        $(".commentCount").text(commentCount);
			    }
			    return AV.Promise.when(object);
			},function(err){alert(1+err);}
			).then(function(object){
				//分享标签
				addTag();
				//2用户及baby信息
				var GameScore = AV.Object.extend("_User");
				var query = new AV.Query(GameScore);
				var userid=object.get('userid');
				query.equalTo("objectId", userid);
				query.first(function(object){
					if(object){
						var username=object.get("username");
						var usericon=object.get("usericon");
						var address=object.get("address");
						$("#username").text(username);
						$("#address").text(address);
						$("#usericon").attr("src",usericon);
					}
				});
				//3最近5个赞用户头像 赞总数
				var praiseArray=object.get("praiseArray");
				if(praiseArray&&praiseArray.length>0){
					var pArray=[];
					if(praiseArray.length>5){
						for ( var i = 0; i < 5; i++) {
							pArray.push(praiseArray[i]);
						}
					}else{
						pArray=praiseArray;
					}
					var imgPraise = AV.Object.extend("imgPraise");
					var praiseQuery = new AV.Query(imgPraise);
					praiseQuery.containedIn("objectId",pArray);
					praiseQuery.select("userId");
					query.find().then(function(result){
						var uArray=[];
						if(result&&result.length>0){
							for ( var i = 0; i < result.length; i++) {
								uArray.push(result[i].get("userId"));
							}
						}
						return uArray;
					}).then(function(uArray){
						var praiseusers = AV.Object.extend("_User");
						var userQuery = new AV.Query(praiseusers);
						userQuery.containedIn("objectId",uArray);
						userQuery.find(function(result){
							if(result){
								
							}
						});
					});
				}
				//4最近前 评论列表
			},function(err){alert(2+err);});
			

		}
	});
	function addTag(tags){
		
		//显示标签
		tags=[{tag_value:"afdsa",name:"sfssss",tag_position:"0.3:0.6"}];
		if(tags){
			//分享图片的宽和高
			var img_width=$('#shared_img').width();
			var img_height=$('#shared_img').height();
			for ( var i = 0; i < tags.length; i++) {
				var tag=tags[i];
				var tagValue=(tag.name==tag.tag_value?tag.name:tag.name+""+tag.tag_value);
				var divWith=180;
				var len = 0;
				if(tagValue){
					len=countCharacters(tagValue);
					if(len > 60){
						len=60;
						tagValue=subStrCharacters(tagValue,60);
					}
					divWith=len*6;
					if(divWith > 180)
						divWith = 180;
				}
				var position=tag.tag_position;
				var lon=110,lat=30;//白点坐标
				var lon1=110,lat1=30;//标注内容坐标
				
				if(position && position.indexOf(":")!=-1){
					var x = new Number(position.split(":")[0]);
					var y = new Number(position.split(":")[1]);
					if(x < 1 && y < 1){
						//白点在左侧
						if(x < 0.4){
							//根据比例换算标注相对位置
							lat = parseInt(img_width*(x));//x轴
							lon = parseInt(img_height*(y));//y轴
							if(lat+divWith+24>img_width){
								lat=img_width-(divWith+24);
							}
							lat1 = lat+8;
							if(len<=30){
								lon1 = lon-13;
							}else{
								lon1 = lon-13-6;
							}
						}else{//白点在右侧
							lat1 = parseInt(img_width*(x));
							lon = parseInt(img_height*(y));
							if(lat1+divWith+24>img_width){
								lat1=img_width-(divWith+24);
							}
							lat = lat1+24+divWith;
							if(len<=30){
								lon1 = lon-13;
							}else{
								lon1 = lon-13-6;
							}
						}
					}
				}
				//动态增加标注
				$("#iPicture").append('<div class="ip_tooltip ip_img32" style="top:'+lon+'px; left:'+lat+'px;" data-round="roundBgW" ></div>'+
				        '<div class="div_yj box1" style="top:'+lon1+'px; left:'+lat1+'px;width:'+divWith+'px;word-wrap: break-word; word-break: normal;">'+tagValue+'</div>');
			}
			$( "#iPicture" ).iPicture();
		}
	}
	function countCharacters(str){
	    var totalCount = 0;  
	    for (var i=0; i<str.length; i++) {  
	        var c = str.charCodeAt(i);  
	    	if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {  
	           totalCount++;  
	        }else {     
	            totalCount+=2;  
	        }  
	    }
	    return totalCount;
	}
	function subStrCharacters(str,len){
		if(str && len>0){
		    var totalCount = 0;  
		    var n=0;
		    for (var i=0; i<str.length; i++) {  
		        var c = str.charCodeAt(i);  
		    	if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {  
		           	totalCount++;  
		        }else {     
		            totalCount+=2;  
		            n ++;
		        }
		        if(totalCount>=len)
			        break;
		    }
		    return str.substr(0,len-n);
		}else{
			return "";
		}
	}
	
	</script>
	
</head>
<body>
	<div id="top" class="maindiv"  >
	</div>
	<div>
		<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" style="background-color:#6BCCD2;font-size:1px;color:#fff">
			<tr>
			<td width="35px">
				<img id="usericon" width="32px" height="32px" src="" style="padding-left:5px;padding-right: 5px;padding-top: 5px ;padding-bottom:2px;" class="round_photo" onerror="this.src='statics/images/userDefault.png'"/>
			</td>
			<td align="left" >
				<span id="username">用户名</span><br>
				男孩 2岁 <span id="address">上海33</span>
			</td>
			<td width="30px" align="left">
				<img width="30px" height="30px" src="statics/images/add.png" style="padding-top:5px;padding-right:10px;"/>
			</td>
			</tr>
			<tr>
			<td colspan="3">
				<div id="iPicture" data-interaction="hover" class="ip_slide"></div>
				<img id="shared_img" src="" onerror="this.src='statics/images/default.png'"/>
				<div style="padding-left:5px;" id="sharedTitle">
				    最多输入46个汉字最多输入40个汉字最多输入40个汉字最多输入40个汉字最多输入40个汉字
				</div>
				<div style="padding-left:5px;">
				<table align="left" width=100% style=""><tr>
				<td width=25%>阅读 <span class="readCount">0</span></td>
				<td width=5%><img src="statics/images/love.png" width="16px" height="16px" ></td><td width=15%><span class="commentCount">0</span></td>
				<td width=5%><img src="statics/images/mail.png" width="16px" height="16px"></td><td width=15%><span class="praiseCount">0</span></td>
				<td align="right"><img src="statics/images/more.png" align="right" width="16px" height="16px" style="padding-right: 10px;"></td>
				</tr></table>	
				</div>
			</td>
			</tr>
		</table>
		<!-- 赞 -->
		<div id="praise" >
			<table border="0" align="center" width="100%" style="font-size:1px;color:#958497">
				<tr>
					<td>
						<img id="user_icon" width="32px" height="32px" src="" style="padding-left:2px;" class="round_photo" onerror="this.src='statics/images/userDefault.png'"/>
						<img id="user_icon" width="32px" height="32px" src="" style="padding-left:2px;" class="round_photo" onerror="this.src='statics/images/userDefault.png'"/>
						<img id="user_icon" width="32px" height="32px" src="" style="padding-left:2px;" class="round_photo" onerror="this.src='statics/images/userDefault.png'"/>
						<img id="user_icon" width="32px" height="32px" src="" style="padding-left:2px;" class="round_photo" onerror="this.src='statics/images/userDefault.png'"/>
						<img id="user_icon" width="32px" height="32px" src="" style="padding-left:2px;" class="round_photo" onerror="this.src='statics/images/userDefault.png'"/>
					</td>
					<td align="right"><span class="praiseCount">0</span>人赞过&gt;</td>
				</tr>
			</table>
		</div>
		<!-- 评论 -->
		<div id="comments" >
			<table border="0" align="center" width="100%" style="font-size:1px;color:#958497">
				<tr>
					<td style="padding-top:10px;">
						<img id="user_icon" width="32px" height="32px" src="" style="padding-left:2px;" class="round_photo" onerror="this.src='statics/images/userDefault.png'"/>
					</td>
					<td align="left" style="border-top:1px #C9C9C9 solid;padding-top:10px;padding-right:20px;">
					kimi lili:<font color="#6F7072" >你给儿子买的玩具真棒，我也要给我女儿买一个,dfsafdsdk发快递撒范德萨发反倒是</font>
					<font color="#C9C9C9" style="padding-left:5px;">5分钟前</font><br><br>
					</td>
				</tr>
				<tr>
					<td style="padding-top:10px;">
						<img id="user_icon" width="32px" height="32px" src="" style="padding-left:2px;" class="round_photo" onerror="this.src='statics/images/userDefault.png'"/>
					</td>
					<td align="left" style="border-top:1px #C9C9C9 solid;padding-top:10px;padding-right:20px;">
					kimi lili:<font color="#6F7072" >你给儿子买的玩具真棒，我也要给我女儿买一个,dfsafdsdk发快递撒范德萨发反倒是</font>
					<font color="#C9C9C9" style="padding-left:5px;">5分钟前</font><br><br>
					</td>
				</tr>
			</table>
		</div>
		<br><br>
	</div>
</body> 
</html>